<template>
  <div class="gedanDetail">
    <!-- 歌单信息 -->
    <div class="gedanInfo">
      <div class="cover">
        <van-image width="100%" height="100%" :src="gedanDetail.coverImgUrl" />
      </div>
      <div class="text">
        <div class="text_title">{{gedanDetail.name}}</div>
        <div class="text_user">
          <div class="text_user_c">
            <van-image width="100%" height="100%" :src="gedanDetail.creator==undefined?'':gedanDetail.creator.avatarUrl" />
          </div>
          <span>
            {{gedanDetail.creator==undefined?'':gedanDetail.creator.nickname}}
          </span>
        </div>
        <div class="play_count">播放量: {{gedanDetail.playCount}} 次</div>
      </div>
    </div>
    <!-- 歌单音乐列表 -->
    <div class="gedanContent">
      <van-list :offset="400" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in currentMusicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
          <template>
            <div class="music_s">
              <div class="m_name">{{item.name}}</div>
              <div class="s_name">{{item.ar[0].name}}</div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <!-- 加载loading -->
    <van-loading v-if="currentMusicList.length===0" color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
    <!-- 更多歌单 -->
    <div v-if="finished" class="moreGedan">
      <div class="moreGedan_c">
        <div class="t">
          <h2>推荐歌单</h2>
          <span class="showMore" v-on:click="$router.push('/gedanlist')">查看更多 &gt;</span>
        </div>
        <ul>
          <li v-for="(item) in xiangsiGedanList" :key="item.id" v-on:click="$router.push(`/gedandetail?id=${item.id}`)">
            <van-image width="100%" height="100%" :src="item.coverImgUrl"></van-image>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getGedanxiangqingId, getGedanxiangqing, getXiangsiGedan } from '../../../utils/api'
export default {
  name: 'GedanDetail',
  data () {
    return {
      // 当前的音乐数组
      currentMusicList: [],
      // 全部音乐数组
      allMusicList: [],
      loading: false,
      finished: false,
      // 歌单详细信息
      gedanDetail: {},
      // 每次加载的数量
      limit: 15,
      // 歌单歌曲总数
      total: 0,
      // 每次加载的偏移量
      offset: 0,
      // 相似歌单
      xiangsiGedanList: []
    };
  },
  methods: {
    // 获取相似歌单
    async getXiangsiGedanFn (id) {
      let result = await getXiangsiGedan(id);
      if (result.code === 200) {
        this.xiangsiGedanList = result.playlists;
      }
    },
    // 获取歌单详情和歌单歌曲和相似歌单
    async getGedanxiangqingFn (id) {
      let result = await getGedanxiangqingId(id);
      if (result.code === 200) {
        this.gedanDetail = result.playlist;
        // 获取相似歌单
        this.getXiangsiGedanFn(this.gedanDetail.id);
        let songIdList = result.playlist.trackIds.map(item => item.id);
        let result2 = await getGedanxiangqing(songIdList.join(','));
        if (result2.code === 200) {
          this.allMusicList = result2.songs;
          this.total = result2.songs.length;
          this.currentMusicList = result2.songs.slice(0, this.limit);
          this.offset = this.limit;
          this.finished = false;
        }
      }
    },
    // 加载数据
    onLoad () {
      this.currentMusicList.push(...this.allMusicList.slice(this.offset, this.offset + this.limit));
      this.offset = this.offset + this.limit;
      this.loading = false;
      // 数据全部加载完成
      if (this.currentMusicList.length >= this.total) {
        this.finished = true;
      }
    },
  },
  mounted () {
    this.getGedanxiangqingFn(this.$route.query.id);
  }
};
</script>

<style lang="less" scoped>
@import '../../css/vars.less';
.van-list{
	/deep/ .van-list__finished-text{
		height: 100/50rem;
		line-height: 100/50rem;
    font-size: 28/50rem;
	}
}
.moreGedan{
  margin-bottom: 2.7rem;
}
.van-cell{
	height: 130/50rem;
  line-height: 1.4;
	.van-cell__value{
		.music_s{
			div:nth-child(1){
        font-size: 0.7rem;
      }
      div:nth-child(2){
        color: #888;
        font-size: 28/50rem;
      }
			&::before{
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 0;
        height: 0;
        transform: translateY(-50%);
        display: inline-block;
        border: 20/50rem solid transparent;
        border-left-color: #ccc;
      }
		}
	}
}
.gedanDetail{
	padding-top: 100/50rem;
		.text{
			padding-bottom: 30/50rem;
		}
		.play_count{
			text-align: center;
			margin-top: 35/50rem;
			font-size: 26/50rem;
			color: grey;
		}
		.text_title{
			text-align: center;
			font-size: 35/50rem;
			margin-top: 30/50rem;
			margin-bottom: 35/50rem;
		}
		.text_user{
			display: flex;
			height: 50/50rem;
			justify-content: center;
			align-items: center;
			span{
				font-size: 30/50rem;
			}
		}
		.text_user_c{
			width: 69/50rem;
			overflow: hidden;
			border-radius: 50%;
			height: 69/50rem;
			margin-right: 20/50rem;
	}
	.gedanInfo{
		padding-top: 50/50rem;
		background-color: @backWhite;
		.cover{
			width: 330/50rem;
			height: 330/50rem;
			border-radius: 30/50rem;
			margin: 0 auto;
			position: relative;
			z-index: 3;
			margin-bottom: 20/50rem;
			&::after{
        content: "";
        position: absolute;
        top: 50%;
        right: -0.5rem;
        margin-top: -2.9rem;
        width: 5.8rem;
        height: 5.8rem;
        border-radius: 35/50rem;
				z-index: -1;
        background-color: rgba(0, 0, 0, 0.06);
			}
			/deep/ .van-image__img{
				border-radius: 35/50rem;
			}
		}
	}
}
.van-loading{
  padding-top: 1rem;
}
.moreGedan_c .t{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: @backWhite;
  h2{
    font-size: 35/50rem;
    font-weight: 500;
    padding-left: 20/50rem;
  }
  .showMore{
    color: #ccc;
    padding-right: 20/50rem;
    font-size: 25/50rem;
  }
}
.moreGedan_c{
  margin-top: 10/50rem;
  ul{
    white-space: nowrap;
    height: 260/50rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20/50rem 0 20/50rem 20/50rem;
    background-color: @backWhite;
    &::-webkit-scrollbar { width: 0 !important }
    li{
      height: 5rem;
      width: 5rem;
      margin-right: 20/50rem;
      display: inline-block;
      border-radius: 30/50rem;
      overflow: hidden;
      position: relative;
      span{
        position: absolute;
        background-color: rgba(0,0,0,.5);
        left: 0;
        bottom: 0;
        font-size: 0.65rem;
        color: @backWhite;
        overflow: hidden;
        text-align: center;
        width: 5rem;
        height: 1.6rem;
        display: -webkit-box;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
        line-height: 1.2;
     }
    }
  }
}
</style>